<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="index.css">
</head>

<body>

    <!--面板-->
    <div id="panel">
        <!--面板的头部-->
        <div class="header">
            <h2>zxyi教育系统</h2>
        </div>
        <!--面板的中间内容-->
        <div class="panel-content">
            <!--账号输入框-->
            <div class="user-pwd">
                <img src="images/icon_people.png">
                <input placeholder="请输入用户名/手机号" name="user">
            </div>
            <!--密码输入框-->
            <div class="user-pwd">
                <img src="images/icon_password.png">
                <input placeholder="请输入密码" type="password" name="pwd">
            </div>
            <!--默认的设置-->
            <div class="setting">
                <a href="#"><input type="checkbox"> 下次自动登录</a>
                <a href="#" class="pull-right">忘记密码?</a>
            </div>
            <!--登录按钮-->
            <button class="login-btn">登&nbsp;录</button>
            <!--立即注册-->
            <div class="reg">
                还没账号?&nbsp;&nbsp;<a href="#">立即注册</a>
            </div>
        </div>
        <!--面板的尾部-->
        <div class="panel-footer">
            <span>社交账号登录: </span>
            <img src="images/sina.png">
            <img src="images/weixin.png">
            <img src="images/qq.png">
        </div>
    </div>

</body>
<script>

    // 获取元素对象
    var login = document.querySelector('#panel');  //整个弹窗
    // title 鼠标点击的区域  
    var title = document.querySelector('.header');  //能拉动的区域

  
    // 1. 得到鼠标在 login 盒子中的坐标
    // 1.1 鼠标在盒子中坐标
    // 1.2鼠标在 title 元素对象上 按下不放
    // 1.3 选择 title 模块
    title.addEventListener('mousedown', function (e) {
        // console.log('鼠标点击后在 盒子中的坐标x：' + x + 'y:' + y);
        // 1.4 鼠标 title 盒子中的位置
        var x = e.pageX - login.offsetLeft;
        var y = e.pageY - login.offsetTop;
        // 1.5 挪动 login 盒子
        document.addEventListener('mousemove', move);

        function move(e) {
            // console.log(login.offsetLeft);
            // e.pageY 和  e.pageX 鼠标挪动的位置 
            // 计算的结果是 login 盒子距离左侧的位置 和 顶部的位置
            login.style.top = e.pageY - y + 'px';
            login.style.left = e.pageX - x + 'px';
        }

        // 1.鼠标抬起 删除 login 盒子的移动事件
        title.addEventListener('mouseup', function () {
            // 删除事件
            document.removeEventListener('mousemove', move);
        })
    })






</script>

</html>